<template>
  <el-container>
    <el-aside>
      <Title name="搜索产品" />
      <el-form :model="form" label-width="auto" label-position="top">
        <el-form-item label="产品类别">
          <el-select v-model="form.categoryId" placeholder="产品类别">
            <el-option
              v-for="item in allCategory"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="产品名称">
          <el-input v-model="form.name" placeholder="产品名称" />
        </el-form-item>
        <el-button @click="handleSearch">搜索</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form>
    </el-aside>
    <div>
      <el-row :gutter="20" style="padding: 20px">
        <el-col :span="8" v-for="item in filteredProducts" :key="item.id">
          <ProductDetailCard :product="item" />
        </el-col>
      </el-row>
    </div>
  </el-container>
</template>

<script setup>
import Title from "../components/Title.vue";
import { ref, reactive, onMounted } from "vue";
import ProductDetailCard from "../components/ProductDetailCard.vue";

// 模拟从本地加载数据
const products = ref([
  {
    id: 1,
    name: "【天斧系列】ASTROX 88S PRO羽毛球拍",
    price: 1850,
    image: "@/assets/racket/s88.jpg",
    categoryId: 1,
    category: "羽毛球拍",
  },
  {
    id: 2,
    name: "【 疾光系列】NANOFLARE 800 PRO 羽毛球拍",
    price: 1480,
    image: "@/assets/racket/pro800.jpg",
    categoryId: 1,
    category: "羽毛球拍",
  },
  {
    id: 3,
    name: "【弓剑系列】ARCSABER 11 PRO羽毛球拍",
    price: 1580,
    image: "@/assets/racket/pro11.jpg",
    categoryId: 1,
    category: "羽毛球拍",
  },
  {
    id: 4,
    name: "POWER CUSHION AERUS Z2 MEN 羽毛球鞋",
    price: 1460,
    image: "@/assets/shoes/pcaz2.jpg",
    categoryId: 2,
    category: "羽毛球鞋",
  },
  {
    id: 5,
    name: "POWER CUSHION ECLIPSION 3 MEN 羽毛球鞋",
    price: 1280,
    image: "@/assets/shoes/pce3.jpg",
    categoryId: 2,
    category: "羽毛球鞋",
  },
  {
    id: 6,
    name: "POWER CUSHION COMFORT Z3 MEN 羽毛球鞋",
    price: 1180,
    image: "@/assets/shoes/cfz3.jpg",
    categoryId: 2,
    category: "羽毛球鞋",
  },
  {
    id: 7,
    name: "【高弹性】EXBOLT 63 羽毛球线",
    price: 76,
    image: "@/assets/line/l63.jpg",
    categoryId: 3,
    category: "羽毛球线",
  },
  {
    id: 8,
    name: "【控制性】AEROBITE BOOST线",
    categoryId: 3,
    price: 88,
    image: "@/assets/line/ab.jpg",
    category: "羽毛球线",
  },
  {
    id: 9,
    name: "【耐久性】NBG95羽毛球线",
    price: 76,
    image: "@/assets/line/l95.jpg",
    categoryId: 3,
    category: "羽毛球线",
  },
]);

// 提取所有类别
const allCategory = ref([
  { id: 1, name: "羽毛球拍" },
  { id: 2, name: "羽毛球鞋" },
  { id: 3, name: "羽毛球线" },
]);

const form = reactive({ categoryId: "", name: "" });
const filteredProducts = ref([]);

onMounted(() => {
  filteredProducts.value = products.value; // 初始化显示所有产品
});

const handleSearch = () => {
  filteredProducts.value = products.value.filter((product) => {
    const matchesCategory =
      !form.categoryId || product.categoryId === parseInt(form.categoryId);
    const matchesName =
      !form.name || product.name.toLowerCase().includes(form.name.toLowerCase());
    return matchesCategory && matchesName;
  });
};

const handleReset = () => {
  form.name = "";
  form.categoryId = "";
  filteredProducts.value = products.value; // 重置后显示所有产品
};
</script>

<style scoped>
.el-container {
  min-height: 100vh;
  padding: 40px;
}
.el-aside {
  padding: 20px;
  height: 500px;
  width: 300px;
  border-right: 1px black solid;
}
.el-button {
  margin-top: 30px;
  width: 100%;
  background: #0057b8;
  color: white;
  height: 40px;
}
.el-button + .el-button {
  margin-left: 0;
}
</style>
